<template>
	<view>
		<uni-nav-bar :fixed="true" :border="false" title="邀您体验" @clickLeft="$pageBack()" left-icon="back" background-color="#" :status-bar="true"></uni-nav-bar>
		<view class="page">
			<image class="bcg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy10.png" mode=""></image>
			<view class="cont">
				<image class="img1" src="/static/login2.png" mode=""></image>
				<view class="t1">阅见新知，行向广阔</view>
				<image class="img2" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/yq.png" mode=""></image>
				<view class="t2">稻浪同歌体验会员30天</view>
				<view class="" v-if="isshow">
					<view class="btn" v-if="userInfo.vip == 0" @click="handleConfirm">立即领取</view>
					<view class="btn btn1" v-if="userInfo.vip == 1">已领取</view>
					<view class="btn btn1" v-if="userInfo.vip == 2">已是稻友</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popupYes" type="center">
			<view class="Popup">
				<view class="title">领取成功！</view>
				<view class="content">
					恭喜获得稻浪同歌体验会员30天，
					<view class="">快去参加活动吧~</view>
				</view>
				<view class="btns" @click="$pageSwitchTab('/pages/index/index')">立即参加</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { receiveVip } from '@/api/branch/trialMembership.js';
import { login } from '@/api/login.js';
import { getUser } from '@/api/user.js';
const popupYes = ref(null);
const fromUserId = ref(0);
const handleConfirm = () => {
	receiveVip({ fromUserId: fromUserId.value }).then((res) => {
		if (res.code == 200) {
			popupYes.value.open();
		}
	});
};
import { getToken, setToken } from '@/utils/auth';
const isshow = ref(false);
const userInfo = reactive({});
const silentLogin = () => {
	uni.login({
		provider: 'weixin', //使用微信登录
		success: function (loginRes) {
			login({ code: loginRes.code }).then((res) => {
				if (res.code == 200) {
					setToken(res.data.token);
					getUser().then((res) => {
						if (res.code == 200) {
							Object.assign(userInfo, res.data.user);
							isshow.value = true;
						}
					});
				}
			});
		}
	});
};
onLoad((option) => {
	silentLogin();
	fromUserId.value = option.userID;
});
</script>
<style lang="scss">
.page {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0%;
	background: #ece6d5;
	.bcg {
		width: 100%;
		height: 100vh;
	}
	.cont {
		width: 100%;
		position: absolute;
		z-index: 1;
		top: 260rpx;
		text-align: center;
		.img1 {
			width: 200rpx;
			height: 60rpx;
		}
		.img2 {
			width: 470rpx;
			height: 268rpx;
		}
		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #75613e;
			margin: 18rpx auto 30rpx;
		}
		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
			margin: 24rpx auto 60rpx;
		}
	}
	.btn {
		width: 430rpx;
		height: 80rpx;
		background: #b19561;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
		margin: 0 auto;
	}
	.btn1 {
		color: #b19561;
		background: transparent;
		border: 1px solid #b19561;
	}
}

.Popup {
	width: 620rpx;
	background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 64rpx 40rpx 40rpx 40rpx;
	box-sizing: border-box;
	text-align: center;
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #4e3f23;
	}
	.content {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		margin: 30rpx auto;
	}
	.btns {
		width: 280rpx;
		height: 72rpx;
		background: #e0d2bb;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
		line-height: 72rpx;
		margin: 60rpx auto 0rpx;
	}
}
</style>
